<template>
  <!-- 定点医院查询 -->
  <div class="hospital">
    <!-- 大图说明 -->
    <div class="ball">
      <div class="title"> <i class="iconfont icon-user"></i> 南昌市</div>
      <div class="title">医疗救治定点医院和发热门诊一览</div>
    </div>
    <!-- 检索表单 -->
    <div>
      <el-form :inline="true" size="small">
        <!-- <el-form-item>
          <el-select v-model="form.area" placeholder="请选择">
            <el-option :value="1" label="江苏省"> </el-option>
            <el-option :value="2" label="江西省"> </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
           <el-input placeholder="请输入关键字" prefix-icon="el-icon-search" v-model="param.name"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadHospitalData">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- /检索表单 -->
    <!-- 医院列表 -->
    <div class="list">
      <!-- 医院信息 -->
      <div class="item" v-for="(item,index) in hospitals.list" :key="item.id" @click="toMap(item)">
        <div class="info">
          <div class="name"> <span class="index">{{index+1}}</span> {{item.name}}</div>
          <div class="tags">
            <span class="tag warning">{{item.flags}}</span>
          </div>
          <div class="address">{{item.province}} {{item.city}} {{item.address}}</div>
        </div>
        <div class="location">
          <div>
            <i class="iconfont icon-location"></i>
          </div>
          <div class="juli">2113.5km</div>
        </div>
      </div>
    </div>
    <!-- /医院列表 -->
    <el-pagination
      v-if="hospitals.total > param.pageSize"
      layout="prev, pager, next"
      @current-change="currentChangeHandler"
      :current-page="param.page"
      :page-size="param.pageSize"
      :total="hospitals.total">
    </el-pagination>
    <!-- /分页 -->
  </div>
</template>

<script>
import {get} from '@/utils/request'
export default {
  data(){
    return {
      form:{
        area:1,
        keywords:""
      },
      param:{
        page:1,
        pageSize:10
      },
      hospitals:{}
    }
  },
  created(){
    this.loadHospitalData();  
  },
  methods:{

    // 跳转到地图中
    toMap(item){
      this.$router.push({
        path:"/hospital/map",
        query:item
      })
    },
     // 加载定点医院信息
    loadHospitalData(){
      let url = "/hospital/pageQuery";
      get(url,this.param).then(response => {
        this.hospitals = response.data;
      });
    },
    currentChangeHandler(page){
      this.param.page = page;
      this.loadHospitalData();
    }
  }
}
</script>
<style scoped>
.ball {
  height: 150px;
  background-image: url("../assets/bg1.png");
  background-size: cover;
  margin: -.5em;
  margin-bottom: 1em;
  padding: 1em;
  color: #ffffff;
}
.ball > .title {
  line-height: 2em;
  font-size: 20px;
  font-weight: bold;
}
.tag {
  border-radius: 3px;
  color: #ffffff;
  padding: .2em .5em;
  font-size: 14px;
}
.tag.warning {
  background-color: #ffb34e;
}
.tag.danger {
  background-color: #ff9896;
}
.list {
  margin-top: .5em;
}
.list > .item {
  border-bottom: 1px solid #f8f8f8;
  padding: .5em 0;
  margin-bottom: .5em;
  display: flex;
}
.list > .item > .info {
  flex:1;
}
.list > .item > .info .name {
  font-size: 16px;
  line-height: 3em;
}
.list > .item > .info .index {
  width: 1.2em;
  background-color: #f4f4f4;
  color: #333333;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 1.2em;
}
.list > .item > .info .tags {
  margin:.2em 0;
}
.list > .item > .info .address {
  color: #999999;
  font-size: 14px;
  line-height: 2em;
}
.list > .item > .location {
  flex-basis: 50px;
  text-align: right;
  text-align: center;
}
.list > .item > .location .iconfont {
  font-size: 24px;
  line-height: 2em;
  color: #0074ff;
}
.list > .item > .location .juli {
  color: #999999;
  line-height: 2em;
}
</style>